import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import TitleBar from '../title-bar/title-bar';
import HeadBar from '../head-bar/head-bar';
import TableList from '../table-list/table-list';

export interface DepartmentData {
  department: string;
  task: string;
  count: number;
  unit?: string;
}

export interface CollaborativeRightPageProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;
  borderColor?: string;
  borderOpacity?: number;

  // 标题配置
  title?: string;
  titleFontSize?: number;
  titleColor?: string;
  titleFontFamily?: string;
  titleFontWeight?: number;
  titleLineHeight?: number;
  titleLetterSpacing?: number;
  titleBackground?: string;
  titleShadow?: string;

  // 英文副标题配置
  subtitle?: string;
  subtitleFontSize?: number;
  subtitleColor?: string;
  subtitleFontFamily?: string;
  subtitleFontWeight?: number;
  subtitleLineHeight?: number;
  subtitleLetterSpacing?: number;
  subtitleOpacity?: number;

  // 时间选择器配置
  timeSelectorIconPath?: string;
  timeSelectorWidth?: number;
  timeSelectorHeight?: number;
  timeSelectorBackgroundColor?: string;
  timeSelectorBorderColor?: string;
  timeSelectorText?: string;
  timeSelectorTextFontSize?: number;
  timeSelectorTextColor?: string;
  timeSelectorTextFontFamily?: string;
  timeSelectorTextFontWeight?: number;
  timeSelectorTextLineHeight?: number;
  timeSelectorTextLetterSpacing?: number;

  // 数据配置
  departments?: DepartmentData[];
  departmentSpacing?: number;
  departmentWidth?: number;
  departmentHeight?: number;
  columns?: number;

  // 部门名称配置
  departmentFontSize?: number;
  departmentColor?: string;
  departmentFontFamily?: string;
  departmentFontWeight?: number;
  departmentLineHeight?: number;
  departmentLetterSpacing?: number;

  // 任务名称配置
  taskFontSize?: number;
  taskColor?: string;
  taskFontFamily?: string;
  taskFontWeight?: number;
  taskLineHeight?: number;
  taskLetterSpacing?: number;

  // 数值配置
  countFontSize?: number;
  countColor?: string;
  countFontFamily?: string;
  countFontWeight?: number;
  countLineHeight?: number;
  countLetterSpacing?: number;
  countBackground?: string;

  // 单位配置
  unitFontSize?: number;
  unitColor?: string;
  unitFontFamily?: string;
  unitFontWeight?: number;
  unitLineHeight?: number;
  unitLetterSpacing?: number;

  // 布局配置
  layout?: 'grid' | 'flex';
  gap?: number;

  // 事件
  onDepartmentClick?: (department: DepartmentData, index: number) => void;
  onTimeSelectorClick?: () => void;
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}


const CollaborativeRightPage = forwardRef<HTMLDivElement, CollaborativeRightPageProps>((props, ref) => {
  const {
    title,
    subtitle = '',
    tabs = [
      { id: '1', text: '当日', isActive: true },
      { id: '2', text: '当月', isActive: false }
    ],
    // 数据配置
    departments = [
      { department: '公安', task: '出动警力', count: 99, unit: '人' },
      { department: '交警', task: '出动警力', count: 99, unit: '人' },
      { department: '交通执法', task: '出动警力', count: 99, unit: '人' },
      { department: '城管', task: '流浪乞讨', count: 99, unit: '人' },
      { department: '城管', task: '出动警力', count: 99, unit: '人' },
      { department: '市场监管', task: '出动警力', count: 99, unit: '人' },
      { department: '市场监管', task: '执法巡查', count: 99999, unit: '人' },
      { department: '市场监管', task: '广告检查', count: 99, unit: '人' }
    ],
    dataItem = [
      { title: '今日工单', subtitle: '累计完成数量', value: '36', unit: '件' },
      { title: '历史工单', subtitle: '累计完成数量', value: '36', unit: '件' }
    ],
    modules = [
      {
        title: '重点管理',
        type: 'line',
        dataItems: [
          { label: '重点人员', value: 99, unit: '人' },
          { label: '个人极端事件', value: 36, unit: '件' },
          { label: '群体事件', value: 2, unit: '件' },
          { label: '暴力案事件', value: 99, unit: '件' }
        ],
      },
      {
        title: '日常管理',
        type: 'tab',
        dataItems: [
          { label: '投诉举报', value: 278 },
          { label: '110警情', value: 78 },
          { label: '案件', value: 20 },
          { label: '投诉举报', value: 278 },
          { label: '110警情', value: 78 },
          { label: '案件', value: 20 }
        ]
      },
      {
        title: '非法接拉客管理',
        type: 'icon',
        dataItems: [
          { label: '发现', value: 78, unit: '个' },
          { label: '劝导', value: 78, unit: '个' },
          { label: '处置', value: 78, unit: '个' },
        ]
      },
      {
        title: '无证营运车辆管理',
        type: 'icon-two',
        dataItems: [
          { label: '外围街道预警数', value: 78, unit: '个' },
          { label: '场库告警数', value: 78, unit: '个' }
        ]
      }
    ],
    // 事件
    onDepartmentClick,
    onTimeSelectorClick,
    onClick,
    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const componentStyle: React.CSSProperties = {
    width: '500px',
    height: '1080px',
    ...style
  };
  const [activeTabIndex, setActiveTabIndex] = useState(0);

  const collaborativeDisposalClassName = [
    'collaborative-right-page',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      style={componentStyle}
      className={collaborativeDisposalClassName}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="top-wrap">
        <TitleBar title="协同处置" subtitle="Co-processing" showTabs={true} />
        <div className="content-wrap">
          <div className="item-area">
            {departments.map((item, index) => (
              <div className="content-item">
                <div className="item-left">
                  <div className="left-title">{item.department}</div>
                  <div className="left-str">{item.task}</div>
                </div>
                <div className="value">
                  <div>{item.count}</div>
                  <span style={{fontSize: '16px', paddingTop: '3px'}}>{item.unit}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="bottom-line" />
      </div>
      <div className="middle-wrap">
        <TitleBar title="工单全生命周期管理" subtitle="Work order full life cycle management" subtitleWidth="50" />
        <div className="content-wrap">
          <div className="data-wrap">
            {dataItem.map((data, value) => (
              <div className="data-item">
                <div className="data-left">
                  <div>{data.title}</div>
                  <div>{data.subtitle}</div>
                </div>
                <div className="value-bg">
                  <div className="value">
                    <div>{data.value}</div>
                    <span style={{
                      fontSize: 14}}>{data.unit}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <HeadBar title="工单信息统计" />
          <TableList tableHeight='120' />
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-wrap">
        <TitleBar title="重点治安事件状态" subtitle="Status of major public security incidents" subtitleWidth="50" />
        <div className="content-wrap">
          <div className="content-content">
            {modules.map((module, moduleIndex) => (
              <div key={moduleIndex} className="content-item">
                <HeadBar title={module.title} showTabs={module.type == 'tab'} plusIcon={module.type == 'icon' || module.type == 'icon-two' ? 'http://localhost:8085/static/images/zonghezhifa/plus-icon.png' : ''} />
                <div className="modules-data-wrap">
                  {module.dataItems.map((item, moduleIndex) => (
                    <div className={module.type == 'line' ? 'vertical-data-item' : 'transverse-data-item'}
                         style={{width: module.type == 'line' ? 'calc(100% / 4)' : module.type == 'icon-two' ? 'calc(100% / 2)' : 'calc(100% / 3)'}}>
                      <div className="title">{item.label}</div>
                      <div className="value-bg" style={{maxWidth: item.unit ? '75px' : '65px'}}>
                        <div className="value">
                          <div>{item.value}</div>
                          <div style={{ fontSize: '16px', paddingBottom: module.type == 'line' ? '5px' : '0', paddingTop: module.type == 'line' ? '0' : '3px'}}>{item.unit ? item.unit : ''}</div>
                        </div>

                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="bottom-line" />
      </div>
    </div>
  );
});

CollaborativeRightPage.displayName = 'CollaborativeRightPage';

export default CollaborativeRightPage;
